{include file="public/head"/}
<div class="container-fluid">

        <div class="ntDesktop">
            <div class="ntDesktop-head">产品详情</div>

            <div class="row clearfix" style="padding-top:12px">
                <div class="col-md-6 column">
                    <ul class="nav nav-tabs">
                        <li class="{$title == 'summary'? 'active':''}">
                            <a href="{:url('product/productDetail',array('id'=>$id,'request'=>'detail'))}" >{:strtoupper(lang('summary'))}</a>
                        </li>
                        <li class="{$title == 'information'? 'active':''}">
                            <a href="{:url('product/productDetail',array('id'=>$id,'request'=>'detailintro'))}">{:strtoupper(lang("information"))}</a>
                        </li>
                        <li class="{$title == 'accessory'? 'active':''}">
                            <a href="{:url('product/productDetail',array('id'=>$id,'request'=>'detailitem'))}">{:strtoupper(lang("accessory"))}</a>
                        </li>
                        <li class="{$title == 'image'? 'active':''}">
                            <a href="{:url('product/productDetail',array('id'=>$id,'request'=>'detailimg'))}">{:strtoupper(lang("image"))}</a>
                        </li>
                        <li class="{$title == 'price'? 'active':''}">
                            <a href="{:url('product/productDetail',array('id'=>$id,'request'=>'detailprice'))}">{:strtoupper(lang("price"))}</a>
                        </li>
                        <li class="{$title == 'stock'? 'active':''}">
                            <a href="{:url('product/productDetail',array('id'=>$id,'request'=>'detailstore'))}">{:strtoupper(lang("stock"))}</a>
                        </li>
                        <li class="{$title == 'purchase_statistics'? 'active':''}">
                            <a href="{:url('product/productDetail',array('id'=>$id,'request'=>'detailbuy'))}">{:strtoupper(lang("purchase_statistics"))}</a>
                        </li>
                        <li class="{$title == 'sell_statistics'? 'active':''}">
                            <a href="{:url('product/productDetail',array('id'=>$id,'request'=>'detailsale'))}">{:strtoupper(lang("sell_statistics"))}</a>
                        </li>
                    </ul>
                </div>
                <div class="col-md-6 text-right">
                    <div>
                        <a href="{:url('product/productlist')}" class="btn btn-primary"><span class="glyphicon glyphicon-chevron-left"></span>{:strtoupper(lang('back_to_list'))}</a>
                        <span style="padding:10px">&nbsp;</span>
                        <a href="{:url('product/productEdit',array('request'=>'edit','id'=>$id))}" class="btn btn-primary"><span class="glyphicon glyphicon-pencil"></span>{:strtoupper(lang('edit'))}</a>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="row" style="padding:20px 20px 0px 20px">
                        <!-- 左侧产品简介 -->
                        <div class="col-md-2">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    产品
                                </div>
                                <div class="panel-body">
                                    <div class="row">
                                        <div class="col-md-12 text-center">
                                            <img src="{$checkRead.img_url}" border="0" style="width: 128px;height: 128px">
                                        </div>
                                    </div>
                                    <ul class="nav nav-pills nav-stacked">

                                        <li v-for="item in checkRead_role" @click="changeprochar(item.id)"><a href="#">{{item.id}}{{item.model?' / '+item.model:''}}</a></li>
                                    </ul>
                                </div>
                                <table class="table table-hover">
                                    <thead>
                                    <tr>
                                        <th>内容</th>
                                        <th>值</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>图标</td>
                                        <td><img src="{$checkRead.img_url}" border="0" width="48px" alt=""></td>
                                    </tr>
                                    <tr>
                                        <td class="field-name">品牌</td>
                                        <td colspan="3">{$checkRead.brand_name}</td>
                                    </tr>
                                    <tr>
                                        <td class="field-name">产品名称</td>
                                        <td colspan="3">{$checkRead.pro_name}</td>
                                    </tr>
                                    <tr>
                                        <td class="field-name">型号</td>
                                        <td>{{prochardata.model}}</td>
                                    </tr>
                                    <tr>
                                        <td class="field-name">工厂型号</td>
                                        <td>{{prochardata.factory_model}}</td>
                                    </tr>
                                    <tr>
                                        <td class="field-name">包装数量</td>
                                        <td>{{formatUnit(prochardata.package_qty,'PCS')}}<small class="unit">PCS</small></td>
                                    </tr>
                                    <tr>
                                        <td class="field-name">每箱数量</td>
                                        <td>{{prochardata.qty}}<small class="unit">PCS/CTN</small></td>
                                    </tr>
                                    <tr>
                                        <td class="field-name">箱规</td>
                                        <td>
                                            {{prochardata.ctn_size}}<small class="unit">CM</small> /
                                            {{formatUnit(prochardata.ctn_m3,'M3')}}<small class="unit">CBM/CTN</small></td>
                                    </tr>
                                    <tr>
                                        <td class="field-name">箱重</td>
                                        <td>{{formatUnit(prochardata.ctn_kgs,'KGS')}}<small class="unit">KGS/CTN</small></td>
                                    </tr>
                                    <tr>
                                        <td class="field-name">条码</td>
                                        <td>{{prochardata.codebar}}</td>
                                    </tr>
                                    <tr v-for="item in prochardata.feature">
                                        <td class="field-name">{{item.feature_name}}</td>
                                        <td>{{item.feature_value}}</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="col-md-10">
                            <div class="panel panel-default">
                                <div class="panel-heading">采购记录</div>
                                <table class="table table-hover">
                                    <thead>
                                    <tr>
                                        <th>合同号</th>
                                        <th>交货</th>
                                        <th>供应商</th>
                                        <th>数量</th>
                                        <th>单价</th>
                                        <th>小计</th>
                                        <th>货柜</th>
                                        <th>创建</th>
                                        <th>编辑</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="item in list" :key="item.id" v-if="list.length>0">
                                        <td><a href="buy_detail.php" target="_blank">{{formatUnit(item.po_id,'ID')}}</a></td>
                                        <td>{{item.portname}}<br>{{item.delivery_date}}</td>
                                        <td><a :href="'/admin/customer/companycheck?company_id='+item.company_id+'&tab=detail'" target="_blank">{{item.copanyname}}</a></td>
                                        <td align="right">{{formatUnit(item.sumqty,'PCS')}}<br><span class="unit">PCS</span></td>
                                        <td align="right">{{formatUnit(item.price,'CNY')}}<br><small class="unit">CNY</small></td>
                                        <td align="right">{{formatUnit(item.sumprice,'CNY')}}<br><span class="unit">CNY</span></td>
                                        <td>{{item.containername}}<br>{{item.etd_date}}</td>
                                        <td>{{item.create_name}}<br>{{item.create_date}}</td>
                                        <td>{{item.update_name}}<br>{{item.update_date}}</td>
                                    </tr>
                                    <tr style="text-align: center;" v-if="list.length==0">
                                        <td colspan="9" class="no_date">{:strtoupper(lang('no_data'))}</td>
                                    </tr>
                                    </tbody>
                                    <tfoot>
                                    <tr>
                                        <td colspan="9" align="right">
                                            合计数量：{{formatUnit(sumbuo.sumnum,'PCS')}} <small class="unit">PCS</small> /
                                            平均单价：{{formatUnit(sumbuo.sumprice,'CNY')}}<small class="unit">CNY</small> /
                                            合计金额：{{formatUnit(sumbuo.summoney,'CNY')}} <small class="unit">CNY</small>
                                        </td>
                                    </tr>
                                    </tfoot>
                                </table>
                            </div>
                            <nav aria-label="Page navigation" class="navbox" v-show="list.length!=0">
                                <ul class="pagination"></ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
<!--产品id-->
<input type="hidden" id="proid" value="{$id}">
{include file="public/foot"/}
<script>
    var table = new Vue({
        el: '.ntDesktop',
        data: {
            list: [],
            sumbuo:{
                sumnum:'0',
                sumprice:'0',
                summoney:'0',
            },
            page: 1,
            pageSize: 30,
            checkRead_role:[],//该产品的角色
            prochardata:[],
        },
        methods: {
            formatUnit:formatUnit,
            setPage(pageCurrent, pageSum) {
                //数据总条数
                var myPageCount = pageSum;
                //一页显示多少条
                var myPageSize = this.pageSize;
                //总页数
                var countindex = myPageCount % myPageSize > 0 ? (myPageCount / myPageSize) + 1 : (myPageCount / myPageSize);
                $.jqPaginator('.pagination', {
                    totalPages: parseInt(countindex),
                    //最多显示多少页
                    visiblePages: 5,
                    //默认显示第几页
                    currentPage: pageCurrent,
                    first: '<li class="first"><a href="javascript:;">'+langcon.page_home+'</a></li>',
                    prev: '<li class="prev"><a href="javascript:;"><i class="arrow arrow2"></i>'+langcon.previous_page+'</a></li>',
                    next: '<li class="next"><a href="javascript:;">'+langcon.next_page+'<i class="arrow arrow3"></i></a></li>',
                    last: '<li class="last"><a href="javascript:;">'+langcon.last_page+'</a></li>',
                    page: '<li class="page"><a href="javascript:;">{{page}}</a></li>',
                    all:'<li class="page"><a href="javascript:;">'+myPageCount+' / '+this.page+'PG , '+this.pageSize+' /PG</a></li>',
                    onPageChange:(num, type)=>{
                        if (type == "change") {
                            this.page=num
                            this.getAllList()
                        }
                    }});
            },
            //数据所有获取
            getAllList(){
                $('.loding').show()
                $.ajax({
                    url: "/admin/product/productDetail",
                    type: 'post',
                    data: {
                        page: this.page,//分页
                        pageSize: this.pageSize,//条数
                        request:'detailbuy',
                        id:$('#proid').val()
                    },
                    dataType: "json",
                    success: (result) => {
                        this.list = result.data;
                        this.sumbuo.sumnum=result.sumnum;
                        this.sumbuo.sumprice=result.sumprice;
                        this.sumbuo.summoney=result.summoney;
                        this.checkRead_role=result.checkRead_role;
                        console.log(this.checkRead_role);
                        this.changeprochar(result.checkRead_role[0].id)
                        if(result.size)
                            this.setPage(parseInt(this.page), result.size)
                        $('.loding').hide()
                    }
                })
            },
            //改变角色获取信息
            changeprochar(id){
                this.checkRead_role.forEach(el=>{
                    if(el.id==id){
                        this.prochardata=el;
                    }
                });
            }
        },
        created(){
            this.getAllList()
        }
    })
</script>

